<template>
  <!-- 手机验证码验证 2018/3/7 11:44 zhangQ -->
  <div>
    <input style="display:none"><!-- for disable autocomplete on chrome -->
    <Form label-position="left" :label-width="100" :model="verifyForm" :rules="ruleVerifyForm" @submit.native.prevent>
      <p class="prompt-title">为了保护账户安全，需要验证手机有效性</p>
      <p class="prompt-descrip">点击获取验证码按钮，您会收到一条有验证码的短信至 ****{{mobileHide }}</p>
      <FormItem label="短信验证码" prop="verifyCode">
        <i-input placeholder="请输入验证码" class="input" size="large" style="width: 316px"
                 v-model="verifyForm.verifyCode">
          <span slot="append" class="prompt-valie-btn" v-if="sendSmsEable==0" @click="sendSms">获取验证码</span>
          <span slot="append" class="prompt-valie-btn-disable" v-if="sendSmsEable!=0"
          >等待{{sendSmsEable}}秒</span>
        </i-input>
      </FormItem>
    </Form>
  </div>
</template>

<script>
  import { sendSms } from '@api/common'
  import { forgetPwdSMS } from '@api/common/user'

  export default {
    name: 'verify-form',
    data () {
      let verifyForm = { // 验证码
        verifyCode: ''
      }
      let ruleVerifyForm = {
        verifyCode: [
          { required: true, message: '验证码不能为空', trigger: 'change' },
          {
            Vue: this,
            trigger: 'change',
            validator (rule, value, callback) {
              this.Vue.formValicade = false
              let formatError = '请输入正确的验证码'
              let noExistError = '请输入正确的验证码'
              if (!value) {
                callback(new Error(formatError))
                this.Vue.formValicade = false
                return
              }
              let reg = /^[0-9]{6}$/
              if (!reg.test(value)) {
                callback(new Error(formatError))
                this.Vue.formValicade = false
                return
              }
              this.Vue.verifyCodeAjax(value).then((response) => {
                let resData = response.data
                if (+resData.isSuccess === 1) {
                  this.Vue.formValicade = true
                  callback()
                } else {
                  this.Vue.formValicade = false
                  callback(new Error(noExistError))
                }
              }).catch((error) => {
                this.Vue.formValicade = false
                callback(new Error(error))
              })
            }
          }
        ]
      }
      let sendSmsEable = 0
      let formValicade = false
      let datas = { verifyForm, ruleVerifyForm, sendSmsEable, formValicade }
      return datas
    },
    props: {
      userInfo: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    computed: {
      mobileHide () {
        if (this.userInfo && this.userInfo.data && this.userInfo.data.user && this.userInfo.data.user.mobile) {
          let mobile = this.userInfo.data.user.mobile
          return mobile.slice(-4)
        }
        return '*****'
      }
    },
    watch: {
      formValicade (newVal) {
        if (newVal) {
          this.$emit('next', true)
        } else {
          this.$emit('next', false)
        }
      }
    },
    methods: {
      /**
       * 定时调用
       * */
      setTimeOutFun () {
        setTimeout(() => {
          if (this.sendSmsEable) {
            this.sendSmsEable = this.sendSmsEable - 1
            this.setTimeOutFun()
          }
        }, 1000)
      },
      /**
       * 发送验证码
       */
      sendSms () {
        if (!(this.userInfo && this.userInfo.data && this.userInfo.data.user && this.userInfo.data.user.mobile)) {
          this.$Notice.open({
            title: '用户信息错误！'
          })
          return
        }
        if (this.sendSmsEable === 0) {
          this.sendSmsEable = 60
          this.setTimeOutFun()
        } else {
          return
        }
        sendSms({ mobilePhone: this.userInfo.data.user.mobile, type: 'changePwd' }).then((response) => {
          let resData = response.data
          if (+resData.isSuccess === 1) {
            this.$Notice.open({
              title: '发送成功！'
            })
          } else {
            this.$Notice.open({
              title: resData.res ? resData.res : '发送失败,请稍后在发送'
            })
            this.sendSmsEable = 60
          }
        }).catch(() => {
          this.$Notice.open({
            title: '发送失败！'
          })
          this.sendSmsEable = 0
        })
      },
      /**
       * 验证码ajax校验
       */
      verifyCodeAjax (value) {
        if (!(this.userInfo && this.userInfo.data && this.userInfo.data.user && this.userInfo.data.user.mobile)) {
          return Promise.reject(new Error('用户信息错误'))
        }
        return forgetPwdSMS({ mobilePhone: this.userInfo.data.user.mobile, verifyCode: value })
      }
    },
    created () {
    },
    mounted () {
    },
    components: {}
  }
</script>

<style scoped>

</style>
